載入兩張圖片

PIXI.loader.add("t1", "img/bg.png")
PIXI.loader.add("t2", "img/mount.png")
PIXI.loader.load(setup);

載入後執行setup function中

先將載入的圖片做成aprite

function setup(loader, resources) {
 var background = new PIXI.Sprite(resources["t1"].texture);
    stage.addChild(background);
    background.width = app.screen.width;
    background.height = app.screen.height;

    var imageToReveal = new PIXI.Sprite(resources["t2"].texture)
    stage.addChild(imageToReveal);
	  imageToReveal.width = app.screen.width;
    imageToReveal.height = app.screen.height;
    
    // ...接下段

RenderTexture是一個特殊的紋理,可以讓PIXI的display object去渲染到他

當沒有預載任何紋理在RenderTexture中,RenderTexture會是一個黑色矩形,create參數代表RenderTexture的大小,這裡指定在mask,會影響之後刷的面積,所以直接指定全面積

var renderTexture = PIXI.RenderTexture.create(app.screen.width, app.screen.height);
var renderTextureSprite = new PIXI.Sprite(renderTexture);
stage.addChild(renderTextureSprite);
imageToReveal.mask = renderTextureSprite;

// ...接下段